<!DOCTYPE html>
<html>
	<head>
		<script src="source/cocosLauncher.js" type="text/javascript"></script>
	</head>
	<body>
		<link rel="stylesheet" type="text/css" href="assets/css/game.css">

		<div class="forms" id="main">
		
			<div class="exit" id="exit">
				<button id="cmdExit">
					<img src="assets/menu/exit.png" />
				</button>
			</div>
		
			<!-- Error -->
			<span id="error" class="error"></span>
			
			<!-- Message -->
			<span id="message" class="message"></span>
		
			<!-- Login -->
			<div id="login" class="login">
				<div>
					<div><label for="username"> Username </label></div>
					<div><input type="text" id="username" name="username" maxlength="25" /></div>
				</div>
				<div>
					<div><label for="password"> Password </label></div>
					<div><input type="password" id="password" name="password" maxlength="16" /></div>
				</div>
			</div>
			
			<!-- Login footer -->
			<div id="loginFooter" class="loginFooter">
				
				<div class="right rightContent">
					<span id="website">Check our <a href="http://crusheddream.azurewebsites.net" target="_blank">website</a></span><br />
					<span> Comments : <a href="mailto:another.piece.studio@gmail.com" target="_blank">another.piece.studio@gmail.com</a> </span>
				</div>
			</div>
			
			<!-- Create account -->
			<div id="account" class="account">
				<div>
					<div><label> Username </label></div>
					<div><input type="text" id="accountUsername" name="accountUsername" maxlength="25" /></div>
				</div>
				<div>
					<div><label> Email </label></div>
					<div><input type="text" id="accountEmail" name="accountEmail" maxlength="100" /></div>
				</div>
				<div>
					<div><label> Password </label></div>
					<div><input type="password" id="accountPassword" name="accountPassword" maxlength="16" /></div>
				</div>
				<div>
					<div><label> Password confirmation </label></div>
					<div><input type="password" id="accountConfirmation" name="accountConfirmation" maxlength="16" /></div>
				</div>
			</div>
			
			<!-- Change password -->
			<div id="changepassword" class="change-password">
				<div>
					<div><label> Old password </label></div>
					<div><input type="password" id="oldPassword" name="oldPassword" maxlength="16" /></div>
				</div>
				<div>
					<div><label> New password </label></div>
					<div><input type="password" id="newPassword" name="newPassword" maxlength="16" /></div>
				</div>
				<div>
					<div><label> New password confirmation </label></div>
					<div><input type="password" id="newPasswordConfirmation" name="newPasswordConfirmation" maxlength="16" /></div>
				</div>
			</div>
			
			<!-- Reset password -->
			<div id="resetpassword" class="reset-password">
				<div>
					<div><label> Username </label></div>
					<div><input type="text" id="resetUsername" name="resetUsername" maxlength="25" /></div>
				</div>
				<div>
					<div><label> Email </label></div>
					<div><input type="text" id="resetEmail" name="resetEmail" maxlength="100" /></div>
				</div>
			</div>
			
			<!-- Lobby -->
			<div id="lobby" class="lobby">
				<div>
					<div><label> Lobby name </label></div>
					<div><input type="text" id="lobbyName" name="lobbyName" readonly="true" maxlength="50" /></div>
				</div>
			</div>
			
			<!-- Server list -->
			<div id="serverList" class="lobbyList">
				<table>
					<tr>
						<th class="th_id"><span> ID </span></th>
						<th class="th_name"><span> Name </span></th>
						<th class="th_num"><span> Players </span></th>
					</tr>
				</table>
			</div>
			
			<!-- Key form -->
			<div id="keys" class="keys">
				<h3>Keys configuration</h3>
				<div class="left">
					<div>
						<div>
							<label> Right &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keyRight" name="keyRight" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Left &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keyLeft" name="keyLeft" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Jump &nbsp; </label>
						</div>	
						<div>
							<input type="text" id="keyJump" name="keyJump" maxlength="1" />
						</div>
					</div>
					<!-- div>
						<div>
							<label> Kill command &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keyKC" name="keyKC" maxlength="1" />
						</div>
					</div -->
					<div>
						<div>
							<label> Inventory 1 &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keyOpt1" name="keyOpt1" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Inventory 2 &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keyOpt2" name="keyOpt2" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Pause &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keyPause" name="keyPause" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Chat &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keyChat" name="keyChat" maxlength="1" />
						</div>
					</div>
				</div>
				<div class="right">
					<div>
						<div>
							<label> Dig &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keyDig" name="keyDig" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Buy Skill 1 &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keySkill1" name="keySkill1" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Buy Skill 2 &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keySkill2" name="keySkill2" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Buy Skill 3 &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keySkill3" name="keySkill3" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Buy Skill 4 &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keySkill4" name="keySkill4" maxlength="1" />
						</div>
					</div>
					<div>
						<div>
							<label> Toggle Buy Mode &nbsp; </label>
						</div>
						<div>
							<input type="text" id="keyBuyMode" name="keyBuyMode" maxlength="1" />
						</div>
					</div>
					
				</div>
			</div>
			
			<!-- Resolution -->
			<div id="video" class="video">
				<h3>Screen resolution</h3>
				<select id="resolution" size="10">
					<option value="640x480">640x480</option>
					<option value="1024x768">1024x768</option>
					<option value="1600x900">1600x900</option>
					<option value="1920x1080">1920x1080</option>
				</select>
				<div>
					<label for="fullscreen">Fullscreen</label>
					<input type="checkbox" class="checkbox" id="fullscreen" />
				</div>
			</div>
			
			<!-- Chat -->
			<div id="chat" class="chat">
				<div id="contentParent">
					<div id="content" class="content">
					</div>
				</div>
				<div id="divTxtChat" class="bottom">
					<input type="text" id="txtChat" maxlength="250" />
				</div>
			</div>
		</div>

		<canvas id="gameCanvas">
			You got an issue.
		</canvas>	
	</body>
</html>